<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-25 11:23:09
-->
<template>
  <h3>v-on 修饰符</h3>
  <hr />
  <h4>大小写敏感：按键修饰符是大小写敏感的。确保使用的按键名称与定义时保持一致。</h4>
  <h4>按键修饰符用于指定触发事件所需的按键及组合：</h4>
  <h4>常用按钮修饰符</h4>
  <ul>
    <li>.enter：表示 Enter 键。</li>
    <li>.esc：表示 Esc 键。</li>
    <li>.delete：表示 Delete 键和 Backspace 键。</li>
    <li>.space：表示空格键。</li>
    <li>.tab：表示 Tab 键。</li>
    <li>.up：表示上方向键。</li>
    <li>.down：表示下方向键。</li>
    <li>.left：表示左方向键。</li>
    <li>.right：表示右方向键。</li>
  </ul>
  <h4>系统按键修饰符</h4>
  <ul>
    <li>.ctrl：表示 Ctrl 键。</li>
    <li>.alt：表示 Alt 键。</li>
    <li>.shift：表示 Shift 键。</li>
    <li>.meta：表示 Windows 徽标键（Command 键）。</li>
  </ul>
  <h4>数字小键盘修饰符</h4>
  <ul>
    <li>.keypad：表示数字小键盘上的键。</li>
  </ul>
  <h4>功能键</h4>
  <ul>
    <li>.f1 到 f12：功能键 F1 到 F12。</li>
  </ul>
  <hr />

  <h4>按下事件</h4>
  <h4>任何按键按下都会触发该事件，无论它是否按下时触发的事件。部分特殊按键不会触发该事件，如 Fn 键，但会响应 Fn + 功能键组合中的功能键第二功能键。</h4>
  <input type="text" placeholder="按下事件" @keydown="onKeyDown" /><span class="msgSpan">{{ msgDown }}</span>
  <h4>松开事件</h4>
  <h4>当按键松开时触发该事件。Fn 键、Tab 键、Windows 徽标键等不会触发该事件。</h4>
  <input type="text" placeholder="松开事件" @keyup="onKeyUp" /><span class="msgSpan">{{ msgUp }}</span>
  <h4>按下并松开事件</h4>
  <h4>除 大小写字母、数字键、回车键外，其它按键均不会触发该事件。</h4>
  <input type="text" placeholder="按下并松开事件" @keypress="onKeyPress" /><span class="msgSpan">{{ msgPress }}</span>
  <hr />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'

const msgDown = ref('等待按下按键')
const onKeyDown = (event: KeyboardEvent) => {
  console.log(Date.now().toString().slice(-3), event.key)
  msgDown.value = `按下了 ${event.key}`
}

const msgUp = ref('等待松开按键')
const onKeyUp = (event: KeyboardEvent) => {
  console.log(Date.now().toString().slice(-3), event.key)
  msgUp.value = `松开了 ${event.key}`
}

const msgPress = ref('等待按下并松开按键')
const onKeyPress = (event: KeyboardEvent) => {
  console.log(Date.now().toString().slice(-3), event.key)
  msgPress.value = `按下并松开了 ${event.key}`
}
</script>

<style scoped>
.bg-pink {
  background-color: #ffb2b2;
  padding: 5px;
}

#blue,
.blue {
  color: blue;
}

#red,
.red {
  color: red;
}

#green,
.green {
  color: green;
}

.bold {
  font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
#numInput[type="number"]::-webkit-outer-spin-button,
#numInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

button {
  margin-right: 10px;
  min-width: 80px;
  font-size: 16px;
  line-height: 150%;
}

.scroll-container {
  display: flex;
  gap: 20px;
}

.normal-scroll,
.passive-scroll {
  height: 200px;
  width: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}

.msgSpan {
  margin-left: 10px;
  font-size: 14px;
  color: #e60000;
}
</style>
